<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
    <div class="account">
        <div class="account-title">
          <router-link to="/"><span> &lt;{{$t("m.home")}}</span></router-link>
          <router-link to="/account"><span> &lt;{{$t("ac.account")}}</span></router-link>DATx{{$t("ac.wallet")}}
        </div>
        <div class="account-header flex">
             <div class="account-header-img"><img src="../../assets/images/dataxpic.png" alt=""></div>
             <p>DATx{{$t("ac.wallet")}}</p>
             <div class="account-header-adress flex">
                 <!--<p>{{address}}</p>-->
                 <p>{{datxDetail.name}}</p>
                 <img src="../../assets/images/copy.png" alt=""
                          v-clipboard:copy="datxDetail.name"
                          v-clipboard:success="onCopy"
                          v-clipboard:error="onError">
             </div>
              <div style="flex: 1"></div>
              <div class="button"><button @click="vote">{{$t("ac.vote")}}</button></div>
        </div>
         <div class="account-content flex">
             <div class="account-content-left">
                 <account-left></account-left>
             </div>
             <div class="account-content-right">
                 <account-right></account-right>
             </div>
         </div>
         <div class="account-assetstable">
               <assets-table></assets-table>
         </div>
         <div class="account-assetstable">
               <exchange-table></exchange-table>
         </div>
         
    </div>
</template>
<script> 
import accountLeft from '@/view/account/accountLeft.vue'
import accountRight from '@/view/account/accountRight.vue'
import assetsTable from '@/view/table/assetsTable.vue'
import exchangeTable from '@/view/table/exchangeTable.vue'

export default{
    components:{
        accountLeft,
        accountRight,
        assetsTable,
        exchangeTable
    },

   data(){
        return{
             address:'datx24dotcavazudatx24dotcavazu',
             datxDetail:""
        }
    },
  created() {
    this.datxDetail=JSON.parse(window.sessionStorage.getItem("walletdetail"))
  },
    methods:{
      // 复制成功
      onCopy(){
        this.$message({
          message: this.$t("dt.copySuccess"),
          type: 'success'
        });
      },

      // 复制失败
      onError(){
        this.$message({
          message: this.$t("dt.copydefault"),
          type: 'erro'
        });
      },
        vote(){
           this.$router.push({path:'/account/vote'})
        }
    }
}
</script>
<style lang="less" scoped>
.account{
    padding-bottom: 40px;
    &-title{
        color: rgba(0,0,0,0.6);
        font-size: 30px;
        padding: 20px 0;
        // line-height: 60px;
        display: flex;
        align-items: center;
        span{
            color: #000000;
            font-size: 16px;
            margin-right: 10px;
            line-height: 47px;
        }
    }
    &-header{
         padding:  10px 40px;
         background: #fff;
         font-size: 22px;
         &-img{
             width: 48px;
             height: 48px;
             img{
                 width: 100%;
                 height: 100%;
                 margin-top: 10px;
             }
         }
        p{   
           padding: 20px;     
           font-weight: bold;  
           line-height: 25px;
        }
        .account-header-adress{
           padding:  0 10px;
           p{
             font-weight: normal;
           }  
           img{
            //  width: 20px;
             height: 24px;  
             margin-top: 19px;
             cursor: pointer;
           }
        }
        .button{
          margin: 15px;
          // 按键样式
          button {
            color: #fff;
            width: 60px;
            border-radius: 4px;
            line-height: 32px;
            text-align: center;
            background-color: #98889b;
            outline: none;
            border: none;
            cursor: pointer;
          }
          button:hover {
            opacity: .8;
          }
        }
        
    }
    &-content{
        margin-top:20px;
        &-right{
            width:50%;
        }
        &-left{
            width: 50%;
        }
    }
    &-assetstable{
        margin-top: 20px;
    }
    .flex{
        display: flex;
    }
}

</style>


